/*
 * @Description: 年报编辑
 * @Author: Zzt
 * @Date: 2022-11-28 20:33:29
 * @LastEditTime: 2022-12-14 11:58:46
 */
import { jsonClone } from '@/utils';
import { Button, Form, Input, Modal, Table } from 'antd';
import Column from 'antd/es/table/Column';
import { useEffect, useState } from 'react';
import { useAnnualReportContext } from '../../contexts/AnnualReportContext';
const list = [
  {
    id: 1,
    title: '一、定编',
    code: '1',
    mea: '人',
    num: 0,
    level: 0,
    pId: '-',
    colspan: 3
  },
  {
    id: 2,
    title: '二、现有全部专职人员',
    code: '2',
    mea: '人',
    num: 0,
    level: 0,
    pId: '-',
    colspan: 3
  },
  {
    id: 3,
    title: '其中: 女性',
    code: '3',
    mea: '人',
    num: 0,
    level: 1,
    pId: '-',
    colspan: 3
  },
  {
    id: 4,
    title: '八、接受寄存档案"',
    code: '54',
    mea: '卷',
    num: 0,
    level: 0,
    pId: '-',
    rowSpan: 2
  },
  {
    id: 5,
    title: '八、接受寄存档案"',
    code: '55',
    mea: '件',
    num: 0,
    level: 0,
    pId: '-',
    rowSpan: 0
  }
];
const ReportEdit = (props: any) => {
  const { editReportList } = useAnnualReportContext();
  const { visible, onClose, data } = props;
  const [reportList, setReportList] = useState(list);
  const [arr, setArr] = useState(new Array(list[0].colspan));
  useEffect(() => {
    setArr(arr.fill(0));
    console.log(arr);
  }, [visible]);
  // 新增档案类型
  const onFinish = (values: any) => {
    console.log(values);

    editReportList({ ...data, dataJson: values }).then(() => {
      onCancel();
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  // 提交表单
  const submitFunc = () => {};
  const onCancel = () => {
    onClose();
  };
  /**
   * @description: 保存单元格操作选择的内容
   * @param {any} row
   */
  const handleSave = (row: any) => {
    // console.log(row);
    const newData = jsonClone(reportList);
    const index = newData.findIndex((item: any) => row.id === item.id);
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    console.log(newData);

    setReportList(newData);
  };
  return (
    <>
      <Modal
        destroyOnClose
        title={data?.name}
        visible={visible}
        width={900}
        onCancel={onCancel}
        footer={[
          <Button key="back" onClick={onCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={submitFunc}>
            保存
          </Button>
        ]}
      >
        <Table dataSource={reportList} pagination={false} bordered={false} rowKey={'id'}>
          <Column title="指标名称" key="name" align="center" colSpan={arr.length + 1} />
          {arr.map((item: any, idx: any) => (
            <Column
              dataIndex={'title'}
              key={idx}
              colSpan={0}
              render={(_text, { level }) => {
                console.log(_text, level, idx);
                return <>{level === idx ? <>{_text}</> : <></>}</>;
              }}
              onCell={(record: any) => ({
                rowSpan: record.rowSpan
              })}
            />
          ))}
          <Column title="计量范围" dataIndex="mea" key="mea" align="center" />
          <Column title="代码" dataIndex="code" key="code" align="center" />
          <Column
            key="num"
            title="数量"
            align="center"
            render={(_text, record: any) => (
              <>
                {record.code && (
                  <Input
                    size="small"
                    onChange={(value) => {
                      handleSave({ ...record, title: value.target.value });
                    }}
                  ></Input>
                )}
              </>
            )}
          />
        </Table>
      </Modal>
    </>
  );
};
export default ReportEdit;
